<template>
	<view class='productSort'>
		<view class="title">
			<view style="display: flex;align-items: center;justify-content: space-between;width: 340rpx;margin-left: auto;margin-right: 75rpx;">
				<view>选择全选</view>
				<view class="check_label" @click.stop="confirmTopicAll" v-if="!click_all_label_ids.includes(label_id)">
					<image src="https://img.jukee.net/def/a6d9c20231005180425628.png" style="width: 80rpx;height: 80rpx;"/>
				</view>
				<view class="check_label" @click.stop="confirmTopicAll" v-else>
					<image src="https://img.jukee.net/def/d69c3202310051804241617.png" style="width: 80rpx;height: 80rpx;" />
				</view>
			</view>
			<text class="iconfont icon-guanbi5" @click="close"></text>
		</view>
		<view class="con-box">
			<view class='aside'>
				<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;">
					<view v-for="(item,index) in productList" :key="item.category_id">
						<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' @click='tap(index,"b"+index)'><text class="item_text font-size32-bold">{{item.label_name}}</text>
						 </view>
					</view>
				</scroll-view>
			</view>
			<view class='conter'>
				<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" @scrolltolower="loadMoreData">
					
					<view v-for="(item,index) in childList" :key="item.id">
						<view class='list'>			
							<view class='item acea-row'>
								<view class='picture'>
									<image :src='item.avatar'></image>
								</view>
								<view class="name line1">
									<view class="line1 font-size32-bold">{{item.title}}</view>
									<view class="line1 acea-row row-middle" style="font-size: 26rpx;font-weight: normal;"><image :src="domain+'/uploads/default/20230628/2c7d68b982302e32ccfa8c0a3d922319.png'" style="width: 30rpx;height: 30rpx;" />{{item.user_circle_count}}粉丝</view>
								</view>
								<view class="check_label" @click.stop="confirmTopic(item)" v-if="!check_ids.includes(item.id)">
									<image src="https://img.jukee.net/def/a6d9c20231005180425628.png" />
								</view>
								<view class="check_label"  @click.stop="confirmTopic(item)" v-else>
									<image src="https://img.jukee.net/def/d69c3202310051804241617.png" />
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="determine_circle" @click="close">确定</view>
	</view>
</template>

<script>
	 
	let app = getApp();
	import { getTopicList } from '@/api/community.js';
	import { getLabelList } from '@/api/api.js';
	import { getListCircle, getAttentionCircle, getAddCommunityCircleList } from '@/api/circle.js';
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		props: {
			check_ids: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				navlist: [],
				productList: [],
				navActive: 0,
				childList: [],
				label_id: 0,
				click_all_label_ids: [],
				is_next_page_true: true,
				page: 1,
				limit: 9999,
				domain: HTTP_REQUEST_URL,
			}
		},
		watch:{
		},
		mounted() {
			// if (!this.productList.length) {
			// 	this.getAllCategory();
			// }
			this.getLabel();
		},
		methods: {
			checkAllCircle() {
				this.$emit('checkAllCircle', this.productList[this.navActive].label_id);
			},
			/**
			 * 获取行业列表
			 */
			getLabel() {
				let that = this,
					customerIndustry = this.$Cache.get('customerIndustry'),
					engagedIndustry = this.$Cache.get('engagedIndustry'),
					is_sort = true;
				getLabelList({customerIndustry, engagedIndustry, is_sort, is_customer_industry: true}).then(res=>{
					that.productList = res.data.list;
					// console.log(that.productList_children);
					that.label_id = res.data.list[0].label_id;
					that.getListCircles()
				}).catch(err=>{
					console.log('err', err);
				})
			},
			getListCircles()
			{
				let that = this;
				if(!that.is_next_page_true) return false;
				let data = {
					label_id: that.label_id,
					/* page: that.page,
					limit: that.limit,
					tab_index: 1, */
				}
				getAddCommunityCircleList(data).then(res => {
					console.log(res);
					that.childList = res.data
					/* if(res.status == 200)
					{
						that.childList = that.childList.concat(res.data.list)
						that.is_next_page_true = res.data.list.length >= that.limit;
						that.page++
					} */
				})
			},
			loadMoreData()
			{
				this.getListCircles();
			},
			// 点击关闭按钮
			close() {
				this.$emit('close');
			},
			tap: function(index, id) {
				let label = this.productList[index];
				this.navActive = index;
				this.label_id = label.label_id
				this.is_next_page_true = true;
				this.page = 1;
				this.childList = [];
				this.getListCircles();
			},
			// getAllCategory: function() {
			// 	let that = this;
			// 	let value = ""
			// 	getTopicList().then(res => {
			// 		let arr = [
			// 			{category_id: "",count_use: 0,count_view: 0,pic: null,topic_id: '',topic_name: "不添加任何话题"}
			// 		]
			// 		that.productList = res.data;
			// 		if(that.productList[0].children && that.productList[0].children.length > 0){
			// 			that.productList[0].children=[...arr,...that.productList[0].children]
			// 		}else{
			// 			that.productList[0].children = arr
			// 		}
			// 		that.childList = that.productList[0].children;
			// 	})
			// },
			confirmTopicAll(){
				let that = this;
				if(this.click_all_label_ids.includes(that.label_id)) {
					let index = this.click_all_label_ids.indexOf(that.label_id);
					this.click_all_label_ids.splice(index, 1)
				} else {
					this.click_all_label_ids.push(that.label_id);
					this.$set(this, 'click_all_label_ids', this.click_all_label_ids);
				}
				that.childList.map(function(value) {
					that.$emit('getTopic', value);
				})
			},
			confirmTopic(item){
				this.$emit('getTopic', item);
			}
		}
	}
</script>
<style scoped lang="scss">
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 70vh;
		background: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		.title{
			text-align: center;
			padding: 20rpx 0;
			position: relative;
			color: #333333;
			font-size: 34rpx;
			font-weight: bold;
			.iconfont{
				color: #8A8A8A;
				font-size: 28rpx;
				position: absolute;
				right: 30rpx;
				top: 42rpx;
				font-weight: normal;
			}
		}
		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
	}
	.productSort .aside {
		overflow-y: auto;
		overflow-x: hidden;
		border-right: 1px solid #EEEEEE;
		width: 202rpx;
		height: 100%;
		overflow: hidden;
	}
	.productSort .aside .item {
		line-height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #666666;
		justify-content: flex-end;
	}
	.productSort .aside .item_text {
		padding: 0 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.productSort .aside .item.on {
		width: 100%;
		text-align: center;
		font-weight: bold;
		color: #333333;
		.item_text {
			border: 3rpx solid #EEEEEE;
		}
	}
	.productSort .conter {
		flex: 1;
		height: 100%;
		padding: 0 15rpx;
		background-color: #ffffff;
		// margin-top: 20rpx;
		overflow: hidden;
	}
	.productSort .conter .list {
		flex-wrap: wrap;	
	}
	.productSort .conter .list .item {
		margin-top: 26rpx;
		margin-bottom: 40rpx;
		align-items: center;
	}
	.productSort .conter .list .item .picture {
		width: 88rpx;
		height: 88rpx;
		border-radius: 100%;
		position: relative;
		// &::before{
		// 	content: "#";
		// 	display: block;
		// 	width: 88rpx;
		// 	height: 88rpx;
		// 	line-height: 88rpx;
		// 	border-radius: 100%;
		// 	color: #ffffff;
		// 	font-size: 40rpx;
		// 	text-align: center;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	background: rgba(0,0,0,.3);
		// }
	}
	.productSort .conter .listw:first-child .picture{
		&::before{
			content: "\\";
			background: #D8D8D8;
		}
	}
	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}
	.productSort .conter .list .name {
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
		font-weight: bold;
		flex: 1;
	}
	.productSort .conter .list .check_label{
		/* margin-left: auto;
		font-size: 28rpx;
		color: #282828;
		font-weight: bold; */
		max-width: 300rpx;
		/* background-color: #FFE60F;
		padding: 20rpx;
		border-radius: 30rpx; */
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	.determine_circle {
		position: fixed;
		background: #FFE60F;
		// border: 2rpx solid #000;
		border-radius: 50rpx;
		padding: 20rpx 80rpx;
		font-size: 36rpx;
		font-weight: bold;
		left: 30%;
		top: 85%;
		width: 40%;
		text-align: center;
	}
</style>